<template>
  <div class="index">
    <index>
      <div class="top box" slot="top">
        <video ref="video" :src="videoSrc" autoplay controls loop
          style="width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 99999;" />
      </div>
      <div class="bottom box utils-relative-zIndex" slot="middle">
        <div v-for="(item, index) in videoList" :key="index" class="img-box">
          <div class="image utils-background-image-cover" @click="changeVideo(item.videoSrc)"
            :style="{ backgroundImage: 'url(\'' + item.img + '\')' }"></div>
        </div>
        <div></div>
        <div></div>
      </div>
    </index>
    <loading :percent="percent" ref="loading"></loading>
  </div>
</template>

<script>
  import index from '../index.vue';
  import { MqttUtil } from '@/utils/MqttUtil.js';
  export default {
    components: {
      index
    },
    data() {
      return {
        videoSrc: 'http://10.145.12.24/smartlab/public/static/torch2020.mp4',
        videoList: [{
            img: require('@/assets/icon.png'),
            videoSrc: 'http://10.145.12.24/smartlab/public/static/torch2020.mp4'
          },
          {
            img: require('@/assets/one.jpeg'),
            videoSrc: 'static/model/video/mp4/sintel.mp4'
          },
        ],
        percent: 0,
        isShow: false
      };
    },
    created() {
      this.initMqtt();
    },
    mounted() {
      this.$emit('getVideo', this.$refs.video);
      this.video = this.$refs.video;
      const that = this;
      const fun = () => {
        // that.videoSrc = 'static/model/video/mp4/torch2020.mp4';
        that.video.play();
        document.removeEventListener('click', fun);
      };
      document.addEventListener('click', fun);
    },
    destroyed() {
      this.$emit('removeVideo', this.$refs.video);
    },
    methods: {
      initMqtt() {
        console.log("执行了");
        this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
        console.log(this.mqtt);
        this.$utils.util.isStatus(() => {
          console.log("被控制端-视频");
          this.mqtt.setSubTopic('check_vdieo');
          this.mqtt.subTopic((top, message) => {
            message = JSON.parse(message.toString());
            console.log('接受事件-视频');
            this.changeVideo(message.src);
          });
        }, 'sub');

      },
      checkPanel(panel) {
        console.log(panel);
        return;
        this.$store.commit('changePanel', panel);
      },
      changeVideo(src) {
        this.videoSrc = src;
        console.log(this.videoSrc);
        this.$utils.util.isStatus(() => {
          // this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
          console.log('点击事件-切换视频');
          this.mqtt.pubTopic('check_vdieo', JSON.stringify({ src }));
        }, 'pub');
      }
    }
  };
</script>

<style lang="less" scoped>
  @cols: 3;
  @rows: 2;

  .index {
    height: 100%;

    .box {
      height: 100%;
      width: 100%;
      // border: 1px dashed blue;
    }

    .bottom {
      display: grid;
      grid-template-columns: repeat(@cols, 1fr);
      grid-template-rows: repeat(@rows, 1fr);
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
      z-index: 999;

      .image {
        height: 100%;
        width: 100%;
        cursor: pointer;
        transition: 0.5s all;

        &:hover {
          transform: scale(1.1);
        }
      }

      .img-box {}
    }
  }
</style>
